<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <h1>Sass</h1>
    <h2>参考链接</h2>
    <ul>
        <li><a target="_blank" href="https://sass-lang.com/">Sass官网</a></li>
        <li><a target="_blank" href="https://www.sass-china.com/">Sass中文文档</a></li>
        <li><a target="_blank" href="https://www.ruanyifeng.com/blog/2012/06/sass.html">SASS用法指南</a></li>
    </ul>

    <h2>Sass安装</h2>
    <p>如果您使用Node.js，可以通过npm运行以下命令来安装Sass：</p>
    <pre>npm install -g sass</pre>

    <h2>我们学习Sass的目的</h2>
    <p>Sass是一种CSS的预编译语言。它允许您使用变量(variables)、嵌套(nesting)、混合(mixins)、函数等等，并且完全兼容CSS语法。Sass帮助保持大型样式表的良好组织，并使其易于在项目内部和跨项目共享设计。</p>
    <ul>
        <li><strong>变量</strong> Sass允许使用变量，这有助于我们统一样式</li>
        <li><strong>嵌套</strong> 嵌套的功效是多个子容器选择器，归纳到同一个父容器选择器中</li>
        <li><strong>混合</strong> 混合的功效是抽取通用的CSS代码</li>
        <li><strong>函数</strong> Sass允许使用函数，这有助于我们进行计算样式</li>
    </ul>


    <h2>Sass思维导图</h2>
    <a target="_blank" href="./img/sass_mind.jpg"><img src="./img/sass_mind.jpg" width="100%" /></a>

    <h2>Sass的学习</h2>
    <h3>Sass常用命令</h3>
    <pre>
// 将会把一个Sass文件input.scss编译输出为output.css
sass input.scss output.css

// 您还可以使用--watch标志查看单个文件或目录。watch标志告诉Sass监听源文件的更改，并在每次保存Sass时重新编译CSS
sass --watch input.scss output.css

// 您可以使用文件夹路径作为输入和输出，并使用冒号分隔它们，来监听文件并输出到目录
sass --watch app/sass:public/stylesheets
    </pre>


    <h3>注释</h3>
    <p>源scss文件:</p>
    <pre>
// 这个注释不会出现在CSS中

/* 这个将会出现在CSS中，压缩模式下不会有 */

/* CSS中显示插值的计算结果
    * 1 + 1 = #{1 + 1} */

/*! 在压缩模式下也会显示 */

p /* 多行注释可以写在任何允许 */
    /* 使用空格的地方。 */ .sans {
    font: Helvetica, // 单行注释也是
        sans-serif;
}
    </pre>

    <p>生成的css文件：</p>
    <pre>
/* 这个将会出现在CSS中，压缩模式下不会有 */
/* CSS中显示插值的计算结果
    * 1 + 1 = #{1 + 1} */
/*! 在压缩模式下也会显示 */
p .sans {
    font: Helvetica, sans-serif;
}
    </pre>


    <h3>嵌套</h3>
    <p>源scss文件:</p>
    <pre>
nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    li { display: inline-block; }
    
    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}
    </pre>
    <p>生成的css文件：</p>
    <pre>
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav li {
    display: inline-block;
}
nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}
    </pre>


    <h3>父节点选择器</h3>
    <p>父节点选择器&是由Sass发明的一个特殊选择器，用于嵌套选择器中引用外部选择器。</p>
    <p>源scss文件:</p>
    <pre>
.alert {
    // The parent selector can be used to add pseudo-classes to the outer
    // selector.
    &:hover {
        font-weight: bold;
    }
    
    // It can also be used to style the outer selector in a certain context, such
    // as a body set to use a right-to-left language.
    [dir=rtl] & {
        margin-left: 0;
        margin-right: 10px;
    }
    
    // You can even use it as an argument to pseudo-class selectors.
    :not(&) {
        opacity: 0.8;
    }
}
    </pre>

    <p>生成的css文件：</p>
    <pre>

.alert:hover {
    font-weight: bold;
}
[dir=rtl] .alert {
    margin-left: 0;
    margin-right: 10px;
}
:not(.alert) {
    opacity: 0.8;
}
    </pre>


    <h3>占位符选择器</h3>
    <p>Sass有一种特殊的选择器，称为“占位符”。它看起来和操作都很像一个类选择器，但是它以%开头，并且不包含在CSS输出中。</p>
    <p>源scss文件:</p>
    <pre>
%toolbelt {
    box-sizing: border-box;
    border-top: 1px rgba(#000, .12) solid;
    padding: 16px 0;
    width: 100%;
    &:hover {
        border: 2px rgba(#000, .5) solid;
    }
}

.action-buttons {
    @extend %toolbelt;
    color: #4285f4;
}

.reset-buttons {
    @extend %toolbelt;
    color: #cddc39;
}
    </pre>

    <p>生成的css文件：</p>
    <pre>
.action-buttons, .reset-buttons {
    box-sizing: border-box;
    border-top: 1px rgba(0, 0, 0, 0.12) solid;
    padding: 16px 0;
    width: 100%;
}

.action-buttons:hover, .reset-buttons:hover {
    border: 2px rgba(0, 0, 0, 0.5) solid;
}

.action-buttons {
    color: #4285f4;
}

.reset-buttons {
    color: #cddc39;
}
    </pre>

    <h3>变量</h3>
    <p>可以将变量看作是整个样式表中的可复用的信息。</p>

    <p>源scss文件:</p>
    <pre>
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
    font: 100% $font-stack;
    color: $primary-color;
}
    </pre>

    <p>生成的css文件：</p>
    <pre>
body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}
          
    </pre>

    <h3>插值</h3>
    <p>插值几乎可以在Sass样式表的任何地方使用，将SassScript表达式的结果嵌入到CSS块中</p>
    <p>源scss文件:</p>
    <pre>

@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
    .icon-#{$name} {
        background-image: url("/icons/#{$name}.svg");
        position: absolute;
        #{$top-or-bottom}: 0;
        #{$left-or-right}: 0;
    }
}

@include corner-icon("mail", top, left);
    </pre>

    <p>生成的css文件：</p>
    <pre>
.icon-mail {
    background-image: url("/icons/mail.svg");
    position: absolute;
    top: 0;
    left: 0;
}
    </pre>

    <h3>規則</h3>

    <ul>
        <li>@import扩展了CSS @规则，从其他样式表加载样式、混合、函数和变量。</li>
        <li>@mixin,@include使复用样式块变得很容易。
        <li>@function定义了可以在SassScript表达式中使用的自定义函数。</li>
        <li>@extend允许继承其他选择器样式。</li>
        <li>@at-root将样式放在CSS文档的根目录中。</li>
        <li>@error触发编译失败，并带有错误消息。</li>
        <li>@warn在不完全停止编译的情况下打印警告。</li>
        <li>@debug打印一条消息用于调试。</li>
        <li>流控制规则（如@if,@each,@for和@while），条件及循环输出。</li>
    </ul>

    <h4>@import</h4>

    <h5>片段文件</h5>
    <p>
    有这样一个约定，以_开头的Sass文件本身不会被编译，而是单纯的作为被导入文件。这些被称为片段文件，它们告诉Sass工具不要试图编译这些文件。在导入片段文件时可以省略_。
    </p>
    <p>源scss文件:</p>
    <pre>
// foundation/_code.scss
code {
    padding: .25em;
    line-height: 0;
}

// foundation/_lists.scss
ul, ol {
    text-align: left;
    & & {
        padding: {
            bottom: 0;
            left: 0;
        }
    }
}

// style.scss
@import 'foundation/code', 'foundation/lists';
    </pre>
    <p>生成的css文件：</p>
    <pre>
code {
    padding: .25em;
    line-height: 0;
}

ul, ol {
    text-align: left;
}

ul ul, ol ol {
    padding-bottom: 0;
    padding-left: 0;
}
    </pre>

    <h4>@mixin、@include</h4>

    <h5>参数</h5>
    <p>
        mixin还可以接受参数，这允许每次调用它们时定制它们的行为。
    </p>

    <p>源scss文件:</p>
    <pre>
@mixin rtl($property, $ltr-value, $rtl-value) {
    #{$property}: $ltr-value;
    [dir=rtl] & {
        #{$property}: $rtl-value;
    }
}

.sidebar {
    @include rtl(float, left, right);
}
    </pre>
    <p>生成的css文件：</p>
    <pre>
.sidebar {
    float: left;
}

[dir=rtl] .sidebar {
    float: right;
}
    </pre>

    <h4>@function</h4>
    <p>
        函数允许您定义对SassScript值的复杂操作，并且可以在整个样式表中复用用这些函数。函数可以很方便地、易读的方式抽象出常见的公式和行为。
    </p>

    <p>源scss文件:</p>
    <pre>

@function pow($base, $exponent) {
    $result: 1;
    @for $_ from 1 through $exponent {
        $result: $result * $base;
    }
    @return $result;
}

.sidebar {
    float: left;
    margin-left: pow(4, 3) * 1px;
}
    </pre>
    <p>生成的css文件：</p>
    <pre>
.sidebar {
    float: left;
    margin-left: 64px;
}
    </pre>



    <h4>@extend</h4>
    <p>
        Sass的@extend规则解决了这个问题。它被写为@extend <selector>，它告诉Sass一个选择器应该继承另一个选择器的样式。
    </p>

    <p>源scss文件:</p>
    <pre>
.error {
    border: 1px #f00;
    background-color: #fdd;
    &--serious {
        @extend .error;
        border-width: 3px;
    }
}
    </pre>
    <p>生成的css文件：</p>
    <pre>
.error, .error--serious {
    border: 1px #f00;
    background-color: #fdd;
}

.error--serious {
    border-width: 3px;
}
    </pre>


</body>

</html>